<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>04_component_props</title>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script src="../js/prop-types.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      // class Test extends React.Component {
      //   constructor(props) {
      //     super(props);
      //     // 传入props的作用：让constructor也能操作props（默认constructor没有props）
      //     console.log("constructor", this);
      //     console.log("constructor", this.props);
      //   }

      //   render() {
      //     console.log("render", this.props);
      //     return <h1>Test</h1>;
      //   }
      // }

      /*
        工作函数组件
          state 目前不能  useState
          props 可以使用
          refs  目前不能  forwardRef
      */
      function Test(props) {
        // 标签属性会作为工产函数的参数传入
        console.log(props);
        return <h1>Test</h1>;
      }

      ReactDOM.render(
        <Test name="jack" age="18" />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>
